<ng-container *ngIf="(selectedTabLink$ | async ) as tab">

  <ng-container *ngIf="tab=== 'hot'">
    <app-image-slider [sliders]="imageSliders$ | async"></app-image-slider>

    <app-horizontal-grid>
      <span appGridItem *ngFor="let item of (channels$|async)">
        <img [src]="item.icon" alt="" [appGridItemImage]="'3rem'">
        <span [appGridItemTitle]="'1rem'">{{item.title}}</span>
      </span>
    </app-horizontal-grid>

  </ng-container>

</ng-container>

<div class="ad-container" *ngIf="ad$ | async  as ad">
  <img [src]="ad.imageUrl" alt="" class="ad-image">
</div>

<app-vertical-grid [itemWidth]="'20rem'" [itemHeight]="'2rem'">

  <app-product-card
    *ngFor="let product of products$ | async"
    [product]="product"
    [routerLink]="['/product', product.id]">
  </app-product-card>

</app-vertical-grid>
